<template>
	<view>
		<view class="header">
			<view class="logo">
				<image src="../../static/logo.png" mode="aspectFill"></image>
			</view>
		</view>
		<form @submit="submit">
			<view class="login-box">
				<view class="item-input">
					<image src="../../static/login/inputPerson.png" mode="widthFix"></image>
					<input type="text" name="username" v-model="username" placeholder="请输入账号"
						placeholder-class="plStyle" />
					<view></view>
				</view>
				<view class="item-input">
					<image src="../../static/login/inputPwd.png" mode="widthFix"></image>
					<input :password="isPwdLook?true:false" name="password" placeholder="请输入密码"
						placeholder-class="plStyle" />
					<view>
						<image :src="`../../static/login/${isPwdLook?'close_eye.png':'open_eye.png'}`" mode="widthFix"
							@tap="lookPwd"></image>
					</view>
				</view>
				<button class="saveBtn" formType="submit">完成</button>
				<view class="item-tool">
					<text></text>
					<text @tap="$u.to('forgetPwd')">忘记密码？</text>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				username: '', //手机号码  qishou 32骑手  fenjian 33分拣  qingxi 34清洗
				isPwdLook: true,
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			lookPwd() {
				this.isPwdLook = !this.isPwdLook
			},
			submit: function(e) {
				//定义表单规则
				/* {
						name: "username",
						checkType: "phoneno",
						errorMsg: "请正确输入账号"
					}, */
				var rule = [{
						name: "username",
						checkType: "notnull",
						errorMsg: "请正确输入账号"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,",
						errorMsg: "密码至少6个字符"
					}
				];
				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				// formData.name5 = this.formData.name5;
				console.log(formData);
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.$http.post('/api/worker/login', formData).then(res => {
						if (res.data.code == 200) {
							console.log(res.data.data)
							uni.setStorageSync('token', res.data.data.token)
							let param = uni.getStorageSync('params')
							this.login(res.data.data)
							this.$u.to('../order/order', 'switchTab')
						} else {
							this.$u.msg(res.data.msg)
						}
					})
				} else {
					this.$u.msg(graceChecker.error)
				}

			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.header {
		height: 550rpx;
		background: url(../../static/login/loginBg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 15rpx;
			margin-top: 120rpx;
		}
	}

	.login-box {
		width: 630rpx;
		background: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		top: -200rpx;
		box-sizing: border-box;
		padding: 50rpx 35rpx;
		box-shadow: 2rpx 2rpx 20rpx #f3f3f3;

		.item-input {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f5f5f5;
			border-radius: 15rpx;
			padding: 26rpx 40rpx;
			margin-bottom: 25rpx;

			image {
				width: 35rpx;
			}

			input {
				width: 250rpx;
			}

			view {
				width: 150rpx;
				text-align: right;
			}
		}

		.saveBtn {
			margin: 30rpx 0;
			margin-top: 50rpx;
		}

		.item-tool {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333;
		}

		.item-title {
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			color: #9aacbd;
			align-items: center;

			.line {
				width: 160rpx;
				height: 1px;
				background: #d8e2ec;
			}

			text {
				padding: 0 15rpx;
			}
		}

		.fingerprint {
			text-align: center;

			image {
				width: 100rpx;
			}
		}
	}
</style>
